<template>
	<view class="cu-modal" :class="visible ? 'show' : ''">
		<view class="cu-dialog">
			<view class="cu-bar bg-white justify-end">
				<view class="content">退回</view>
				<view class="action" @tap="hideModal"><text class="cuIcon-close text-red"></text></view>
			</view>
			<view class="padding-sm cu-form-group">
				<view class="title">
					<text class="cuIcon-title text-orange"></text>
					请选择要退回到的节点:
				</view>
				<picker @change="handleSelectChange" :value="selectValueShow.index" :range="options" range-key="name">
					<view class="dateTimeFormItem picker">{{ selectValueShow.name }}</view>
				</picker>
			</view>
			<view class="padding-sm cu-form-group">
				<view class="title">
					<text class="cuIcon-title text-orange"></text>
					退回原因:
				</view>
				<textarea v-model="form.ReturnInfo" :auto-height="true"></textarea>
			</view>
			<view class="cu-bar bg-white">
				<view class="action margin-0 flex-sub  solid-left" @tap="hideModal">取消</view>
				<view class="action margin-0 flex-sub text-green solid-left" @tap="okClick(1)">退回后发送给我</view>
				<view class="action margin-0 flex-sub text-blue solid-left" @tap="okClick(0)">退回</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapActions } from 'vuex';
export default {
	props: {
		visible: {
			type: Boolean,
			default: false
		},
		flow: {
			type: Object,
			default: () => {
				return {};
			}
		}
	},
	data() {
		return {
			form: {
				ReturnInfo: '',
				ReturnToNode: ''
			},
			selectValueShow: {
				index: 0,
				name: ''
			},
			options: []
		};
	},
	watch: {
		visible: {
			deep: true,
			immediate: true,
			handler(val, oldVal) {
				if (val) {
					this.initData();
				}
			}
		}
	},
	methods: {
		...mapActions({
			returnInit: 'flow/returnInit'
		}),
		initData() {
			this.returnInit({ ...this.flow })
				.then(res => {
					res.forEach(e => {
						e.name = e.RecName + '-' + e.Name;
					});
					this.options = res;
				})
				.catch(err => {
					console.log(err);
				});
		},
		hideModal() {
			this.$emit('close-modal');
		},
		cancelClick() {
			this.$emit('cancel-click');
		},
		okClick(value) {
			if (!this.form.ReturnToNode) {
				return uni.showToast({
					title: '请选择退回节点'
				});
			}
			if (!this.form.ReturnInfo) {
				return uni.showToast({
					title: '请输入退回原因'
				});
			}
			this.$emit('ok-click', { ...this.form, IsBack: value });
		},
		handleSelectChange(e) {
			console.log('valueChange', e);
			let index = e.detail.value;
			let obj = this.options[index];
			this.form.ReturnToNode = obj.No + '@' + obj.Rec;
			this.selectValueShow.name = obj.name;
			this.selectValueShow.index = index;
		}
	}
};
</script>

<style></style>
